<template>
  <div class="trade-container">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- :class="{ selected: user.isDefault == 1 }" -->
    <div v-for="item in tradeData.userAddressList" :key="item.id">
      <div class="dizhicard" @click="changeDefault(item)">
        <div class="data">
          <div
            class="nameAndphone username"
            :class="{ selected: item.isDefault == 1 }"
          >
            <span>{{ item.consignee }} </span>
            <span>{{ item.phoneNum }}</span>
            <span class="active">
              <span class="s3" v-show="item.isDefault == 1">默认地址</span>
            </span>
          </div>
          <div class="address">{{ item.fullAddress }}</div>
        </div>
      </div>
    </div>

    <div class="line"></div>
    <h5 class="play">支付方式</h5>
    <div class="address clearFix">
      <span class="username selected">在线支付</span>
      <span class="username" style="margin-left: 5px">货到付款</span>
    </div>
    <div class="line"></div>
    <div class="way">
      <h5>配送方式</h5>
      <div class="info clearFix">
        <span class="s1">天天快递</span>
        <p>配送时间：预计8月10日（周三）09:00-15:00送达</p>
      </div>
    </div>
    <h5 class="pay">商品清单</h5>
    <div class="qingdanbox">
      <div v-for="(item, index) in tradeData.detailArrayList" :key="index">
        <van-card
          :num="item.skuNum"
          :price="item.orderPrice"
          :desc="item.sourceId"
          :title="item.skuName"
          :thumb="item.imgUrl"
        />
      </div>
    </div>

    <div class="line"></div>
    <div class="pricebox">
      <div class="pricebox1">
        <div class="price">
          <span>商品金额</span>
          <span>￥{{ tradeData.totalAmount }}</span>
        </div>
        <div class="youfei">
          <span>邮费</span>
          <span>￥0.00</span>
        </div>
      </div>
    </div>
    <!-- 留言 -->
    <div class="orderComment">
      <h5>留言板</h5>
      <textarea
        style="resize: none"
        placeholder="建议留言前先与商家沟通确认"
        class="remarks-cont"
        v-model="orderComment"
      ></textarea>
    </div>

    <van-submit-bar
      :price="tradeData.totalAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { getTradeStore } from "../../stores/trade";
import { useRouter, useRoute } from "vue-router";
let tradeData = getTradeStore();
//返回按钮的回调
const onClickLeft = () => history.back();
//商品清单
const detailArrayList = computed(() => {
  return tradeData.detailArrayList || [];
});
//计算默认收件人信息
const defaultUser = computed(() => {
  return tradeData.userAddressList.find((item: any) => item.isDefault == "1");
});
//留言板
let orderComment = ref("");
//地址选中的列表
const chosenAddressId = ref("1");
//使用路由
const router = useRouter();
const route = useRoute();
//点击选中地址
const changeDefault = (item: any) => {
  tradeData.userAddressList.forEach((item: any) => {
    item.isDefault = "0";
  });
  item.isDefault = "1";
};
//提交订单成功:返回交易订单ID
//let tradeNo = tradeData.TradeData.tradeNo;

let orderId = tradeData.submitData.value;
//点击提交的回调,需要发请求
const onSubmit = async () => {
  try {
    //整理参数发请求
    //请求的整体参数
    let data = {
      consignee: defaultUser.value.consignee, //默认收件人名字
      consigneeTel: defaultUser.value.phoneNum, //默认收件人手机号
      deliveryAddress: defaultUser.value.fullAddress, //默认收件人的地址
      paymentWay: "ONLINE", //支付方式 在线
      orderComment: orderComment.value, //备注
      orderDetailList: detailArrayList.value, //商品清单
    };
    await tradeData.submit(tradeData.tradeNo, data);
    // 提交订单成功: 返回交易订单ID;
    router.push({
      path: "/submitorde",
      query: { orderId }, //orderId
    });
  } catch (error) {
    return Promise.reject(error);
  }
  //失败报错
};
onMounted(async () => {
  //获取购物车列
  await tradeData.reqTradeData();
  console.log(tradeData.tradeNo);
});
</script>

<style scoped lang="less">
.trade-container {
  height: 667px;
  overflow: scroll;
  margin-bottom: 60px;
  .line {
    height: 2px;
    background-color: #ddd;
  }
  .play {
    line-height: 36px;
    margin: 2px 0;
    font-size: 16px;
  }
  .way {
    font-size: 16px;
  }
  .pay {
    font-size: 16px;
  }
  .qingdanbox {
    height: 200px;
    overflow: scroll;
  }

  .address {
    padding-left: 20px;
    margin: 15px 0px;
    .username {
      font-size: 16px;
      float: left;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #ddd;
      position: relative;
    }
    .username::after {
      content: "";
      display: none;
      width: 13px;
      height: 13px;
      position: absolute;
      right: 0;
      bottom: 0;
      background: url(./images/choosed.png) no-repeat;
    }
    .username.selected {
      border-color: #e1251b 1px solid;
    }
    .username.selected::after {
      display: block;
    }
  }
  .dizhicard {
    display: flex;
    margin: 10px 0;
    border-top: #e1251b 2px solid;
    border-bottom: #e1251b 2px rgb(237, 228, 58);
    .checked {
      flex: 1;
      margin-left: 10px;
    }
    .data {
      flex: 8;
      padding-top: 10px;
      line-height: 1px;
      .nameAndphone {
        font-size: 14px;
        margin-left: 22px;
        .active {
          margin-left: 10px;
          background-color: #ddd;
        }
      }
      .address {
        font-size: 14px;
        .pricebox1 {
          font-size: 16px;
        }
      }
    }
  }
  .pricebox {
    .pricebox1 {
      .price {
        display: flex;
        width: 375px;
        justify-content: space-between;
      }
      .youfei {
        display: flex;
        width: 375px;
        justify-content: space-between;
      }
    }
  }
  .orderComment {
    .remarks-cont {
      margin-left: 10px;
      margin-bottom: 30px;
      width: 90%;
      height: 100px;
    }
  }
}
</style>
